<template>
	<div>
		<p>这是一个商城页面</p>
	</div>
	<div class="tobanli">
		<tob-input v-bind:addtobobj="addtobobj"></tob-input>
		<tob-list v-bind:tobobj="tobobj" v-bind:changecheckz="changecheckz"></tob-list>
		<tob-choose></tob-choose>
	</div>
</template>
<script>
	import TobInput from '../components/toblist/TobInput.vue'
	import TobList from '../components/toblist/TobList.vue'
	import TobChoose from '../components/toblist/TobChoose.vue'
	export default {
		name: 'shapping',
		data(){
			return {
				tobobj:[
					{id:'1',name:'看书',done:false},
					{id:'2',name:'唱歌',done:true},
					{id:'3',name:'跳舞',done:false}
				]
			}
		},
		methods:{
			addtobobj(tob){
				this.tobobj.unshift(tob)
			},
			changecheckz(tobid){
				this.tobobj.forEach((tob)=>{
					if(tob.id === tobid){
						tob.done=!tob.done
					}
				})
			}
		},
		components: {
			TobInput,
			TobList,
			TobChoose
		}
	}
</script>
<style scoped>
	.tobanli{
		margin:10px 10px;
		border: 1px solid #000000 
	}
</style>